<template>
	<view class="app-content">
		<view class="title">
			<u--textarea height="180" maxlength="999" v-model="content" placeholder="美好的一天,写点什么吧..."
				border="none"></u--textarea>
		</view>
		<view class="content video-list">
			<view class="video-item" v-for="item,index in fileList1" :key="index">
				<image src="https://pw.qyang.cc/static/delete.png" class="delete" @click="handleDelete(index)">
				</image>
				<video :src="item" class="video" v-if="item.includes('.mp4')"></video>
				<image :src="item" class="video"></image>
			</view>
			<view class="btn" @click="chooseImage">
				<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加图片
			</view>
		</view>
		<view class="list">
			<!-- @click="showCategory = true" -->
			<picker mode="selector" :range="columns" range-key="name" @change="choseCate">
				<view class="list-con">
					<view class="con1">
						<i class="iconfont">&#xe600;</i>
						<view class="text">
							选择分类
						</view>
					</view>
					<view class="con2">
						{{category_id?'已选择':category}}
						<u-icon name="arrow-right" size="14" color="#BDBDBD"></u-icon>
					</view>
				</view>
			</picker>

			<view class="list-con" @click="chooseOrder">
				<view class="con1">
					<i class="iconfont">&#xe8ae;</i>
					<view class="text">
						选择订单
					</view>
				</view>
				<view class="con2" style="flex: 1;">
					<view class="text-cut-one">{{order_id?'已选择':''}}</view>
					<u-icon name="arrow-right" size="14" color="#BDBDBD"></u-icon>
				</view>
			</view>
			<view class="list-con" @click="chooseActivity()">
				<view class="con1">
					<i class="iconfont">&#xe614;</i>
					<view class="text">
						选择活动
					</view>
				</view>
				<view class="con2" style="flex: 1;">
					<view class="text-cut-one">{{activity_ids?'已选择':''}}</view>
					<u-icon name="arrow-right" size="14" color="#BDBDBD"></u-icon>
				</view>
			</view>
			<view class="list-con list-con1" @click="choseLocal">
				<view class="con1">
					<i class="iconfont">&#xe601;</i>
					<view class="text">
						添加地点
					</view>
				</view>
				<view class="con2" style="flex: 1;">
					<view class="text-cut-one">{{location?'已选择':location}}</view>
					<u-icon name="arrow-right" size="14" color="#BDBDBD"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="submit">发布</view>
		</view>

		<!-- <u-picker :show="showCategory" :columns="columns" @cancel="showCategory=false" @confirm="confirm"></u-picker> -->
	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data() {
			return {
				fileList1: [],
				showCategory: false,
				columns: [],
				category: '',
				category_id: "", //分类id
				order_id: "", //订单id
				activity_ids: "", //活动id
				content: "", //内容
				images: [], //图片
				lng: "",
				lat: "",
				location: "",
				id:null,
			};
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				uni.setNavigationBarTitle({
					title:'编辑动态'
				})
				this.rq.getData('dynamic/dynamic_info',{id:this.id}).then(res=>{
					this.location = res.data.location
					this.images = res.data.images
					this.content = res.data.content
					this.activity_ids = res.data.activity_ids
					this.category_id = res.data.category_id
					this.order_id = res.data.order_id
					this.lat = res.data.lat
					this.lng = res.data.lng
					this.fileList1 = this.images
				})
			}else{
				uni.setNavigationBarTitle({
					title:'发布动态'
				})
			}
		},
		onReady() {
			//分类列表
			this.rq.getData('dynamic/category', {}).then(res => {
				if (res.code == 1) {
					this.columns = res.data
				}
			})
		},
		methods: {
			choseCate(e) {
				this.category = this.columns[e.detail.value].name
				this.category_id = this.columns[e.detail.value].id
			},
			choseLocal() {
				var that = this
				uni.chooseLocation({
					success: function(res) {
						that.location = res.address + res.name
						that.lng = res.longitude
						that.lat = res.latitude
					}
				});
			},
			receiveOrder(data) {
				console.log(data);
				this.order_id = data.length == 0 ? '' : data.join()
			},
			receiveActivity(data) {
				this.activity_ids = data.length == 0 ? '' : data.join()
			},
			chooseOrder() {
				uni.navigateTo({
					url: '/pages/square/order'
				})
			},
			chooseActivity() {
				uni.navigateTo({
					url: '/pages/square/activity'
				})
			},
			submit() {
				if (this.content == '' && this.fileList1.length == 0) {
					uni.showModal({
						title: '',
						content: '请上传动态内容',
						showCancel: false,
					})
					return
				}
				if (this.category_id == '') {
					uni.showModal({
						title: '',
						content: '请选择分类',
						showCancel: false,
					})
					return
				}
				this.rq.getData('dynamic/release_dynamic', {
					id:this.id?this.id:null,
					category_id: this.category_id,
					order_id: this.order_id,
					activity_ids: this.activity_ids,
					content: this.content,
					images: this.fileList1.join(','),
					lng: this.lng,
					lat: this.lat,
					location: this.location,
					city_id: uni.getStorageSync('dw').id
				}).then(res => {
					if (res.code == 1) {
						uni.navigateBack();
						console.log('发布动态');
					}
				})
			},
			handleDelete(index) {
				this.fileList1.splice(index, 1)
			},
			// 新增图片
			chooseImage() {
				let _this = this
				//#ifndef H5
				uni.chooseMedia({
					sizeType: ['original', 'compressed'],
					mediaType: ['image', 'video'],
					sourceType: ['album'],
					success(res) {
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						let files = res.tempFiles.map(item => item.tempFilePath)
						getApp().uploadFile(files, {}, (url) => {
							console.log(url)
							_this.fileList1 = [..._this.fileList1, ...url]
							uni.hideLoading()
						})
					}
				})
				//#endif
				//#ifdef H5
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						getApp().uploadFile(res.tempFilePaths, {}, (url) => {
							console.log(url)
							_this.fileList1 = [..._this.fileList1, ...url]
							uni.hideLoading()
						})
					}
				})
				//#endif				
			},
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		background-color: #FFFFFF;
	}

	.list {
		padding: 20rpx;

		.list-con {
			display: flex;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #F4F4F4;
			justify-content: space-between;

			.con1 {
				display: flex;
				align-items: center;

				.text {
					margin: 0 20rpx;
				}
			}

			.con2 {
				display: flex;
				align-items: center;
				line-height: 28rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.list-con1 {
			border-bottom: 0;
		}
	}

	.content {
		padding: 15rpx 25rpx;

		.btn {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8px;
			opacity: 1;
			background: #F7F7F7;
			box-sizing: border-box;
			border: 0.5px solid #C4C4C4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;

			color: #B8B8B8;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.title {
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 22px;
		letter-spacing: 0px;
		font-variation-settings: "opsz" auto;
		color: #333333;
		padding: 20rpx 30rpx 0;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: normal;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			letter-spacing: 20rpx;
		}
	}

	.text-cut-one {
		flex: 1;
		text-overflow: ellipsis;
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: right;
	}

	.video-item {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;

		.delete {
			padding: 10rpx;
			position: absolute;
			z-index: 4;
			width: 32rpx;
			height: 32rpx;
			top: -22rpx;
			right: -22rpx;
		}
	}

	.video {
		width: 160rpx;
		height: 160rpx;
	}

	.video-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
</style>